<template>
	<view class="query-section">
		<view class="section-title">查询模块：</view>
		<image class="imgBox" mode="aspectFill" src="https://www.pengfei.site:8443/image/green.gif"></image>
		<view class="query-form">
			<view class="form-item">
				<text class="label">填写周次：</text>
				<input class="input-field" v-model="selectedWeek" placeholder="请输入周次，只需要数字" />
			</view>
			<view class="form-item" style="margin-top: -20rpx;">
				<text class="label" style="margin-top: 20rpx;">第几节课：</text>
				<picker @change="onClassPeriodChange" :value="classPeriodIndex" :range="classPeriods">
					<view class="picker-view">
						<text>{{ selectedClassPeriod || '请选择节次' }}</text>
						<uni-icons class="arrow" type="down"></uni-icons>
					</view>
				</picker>
			</view>
			<view class="form-item">
				<text class="label">星期几：</text>
				<picker @change="onWeekdayChange" :value="weekdayIndex" :range="weekdays">
					<view class="picker-view">
						<text>{{ selectedWeekday || '请选择星期' }}</text>
						<uni-icons class="arrow" type="down"></uni-icons>
					</view>
				</picker>
			</view>
			<view class="form-item">
				<text class="label">教室名称：</text>
				<input class="input-field" v-model="classroomName" placeholder="例如：勤者楼301或綦河书院3104" />
			</view>
			<view class="form-item">
				<text class="label">查询结果：</text>
			</view>
			
			<!-- 查询结果展示区域 -->
			<view class="search-results" v-if="searchResults.length > 0">
				<view class="result-item" v-for="(item, index) in searchResults" :key="index">
					<view class="result-header">
						<text class="teacher-name">工号：{{ item.teacherId }}</text>
						<text class="teacher-name">教师姓名：{{ item.teacherName }}</text>
					</view>
					<view class="result-content">
						<text class="teacher-name">教师学院：{{ item.college }}</text>
						<text class="teacher-name" v-if="item.location">全部上课地点：{{ item.location }}</text>
						<text class="teacher-name" v-if="item.weekType">上课单双周：{{ formatWeekType(item.weekType) }}</text>
					</view>
				</view>
			</view>
			
			<!-- 无结果提示 -->
			<view class="no-results" v-if="hasSearched && searchResults.length === 0">
				<text>未找到相关课程信息</text>
			</view>
			
			<button class="search-btn" @click="handleSearch" :disabled="isLoading">
				{{ isLoading ? '查询中...' : '搜索' }}
			</button>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted
	} from 'vue'
	import request from '@/utils/request'

	// 定义事件
	const emit = defineEmits(['search'])

	// 查询模块数据
	const selectedWeek = ref('')
	const classroomName = ref('')
	const selectedClassPeriod = ref('')
	const classPeriodIndex = ref(0)
	const selectedWeekday = ref('')
	const weekdayIndex = ref(0)
	
	// 查询结果相关数据
	const searchResults = ref([])
	const isLoading = ref(false)
	const hasSearched = ref(false)

	// 节次选项
	const classPeriods = [
		'1-2节课',
		'3-4节课',
		'5-6节课',
		'7-8节课',
		'9-10节课',
		'11-12节课'
	]

	// 星期几选项
	const weekdays = [
		'星期一',
		'星期二',
		'星期三',
		'星期四',
		'星期五',
		'星期六',
		'星期日'
	]

	// 获取今天的星期几并设置为默认值
	const initTodayWeekday = () => {
		const today = new Date()
		const dayOfWeek = today.getDay() // 0是星期日，1是星期一，以此类推
		// 转换为我们的索引：星期日(0) -> 6, 星期一(1) -> 0, 星期二(2) -> 1, ...
		const todayWeekdayIndex = dayOfWeek === 0 ? 6 : dayOfWeek - 1
		weekdayIndex.value = todayWeekdayIndex
		selectedWeekday.value = weekdays[todayWeekdayIndex]
	}

	// 组件挂载时初始化今天的星期几
	onMounted(() => {
		initTodayWeekday()
	})

	// 节次选择器事件
	const onClassPeriodChange = (e) => {
		classPeriodIndex.value = e.detail.value
		selectedClassPeriod.value = classPeriods[e.detail.value]
	}

	// 星期几选择器事件
	const onWeekdayChange = (e) => {
		weekdayIndex.value = e.detail.value
		selectedWeekday.value = weekdays[e.detail.value]
	}

	// 将星期几转换为数字
	const getWeekdayNumber = (weekday) => {
		const weekdayMap = {
			'星期一': 1,
			'星期二': 2,
			'星期三': 3,
			'星期四': 4,
			'星期五': 5,
			'星期六': 6,
			'星期日': 7
		}
		return weekdayMap[weekday] || 1
	}

	// 将节次转换为API需要的格式
	const formatClassSession = (classPeriod) => {
		// 将"1-2节课"转换为"1-2节"
		return classPeriod.replace('课', '')
	}

	// 将weekType转换为中文显示
	const formatWeekType = (weekType) => {
		const weekTypeMap = {
			'all': '全部周',
			'odd': '单周',
			'even': '双周'
		}
		return weekTypeMap[weekType] || '未知'
	}

	// 搜索功能
	const handleSearch = async () => {
		if (!selectedWeek.value || !classroomName.value || !selectedClassPeriod.value || !selectedWeekday.value) {
			uni.showToast({
				title: '请输入所有搜索条件',
				icon: 'none'
			})
			return
		}

		isLoading.value = true
		hasSearched.value = true
		searchResults.value = []

		try {
			// 构建查询参数
			const params = {
				dayOfWeek: getWeekdayNumber(selectedWeekday.value),
				classSession: formatClassSession(selectedClassPeriod.value),
				week: selectedWeek.value,
				location: classroomName.value
			}

			console.log('查询参数:', params)

			// 调用API
			const response = await request.get('/api/v1/course-schedule/search', params)
			
			console.log('API响应:', response)

			if (response.success) {
				searchResults.value = response.data || []
				
				if (searchResults.value.length > 0) {
					uni.showToast({
						title: `查询成功，找到${response.total}条记录`,
						icon: 'success'
					})
				} else {
					uni.showToast({
						title: '未找到相关课程信息',
						icon: 'none'
					})
				}
			} else {
				uni.showToast({
					title: response.message || '查询失败',
					icon: 'none'
				})
			}
		} catch (error) {
			console.error('查询失败:', error)
			uni.showToast({
				title: error.message || '网络请求失败',
				icon: 'none'
			})
		} finally {
			isLoading.value = false
		}

		// 向父组件发送搜索事件（保持原有功能）
		emit('search', {
			week: selectedWeek.value,
			classroom: classroomName.value,
			classPeriod: selectedClassPeriod.value,
			weekday: selectedWeekday.value,
			// 如果有查询结果，发送第一个教师姓名
			teacherName: searchResults.value.length > 0 ? searchResults.value[0].teacherName : null
		})
	}
</script>

<style lang="scss" scoped>
	.imgBox {
		position: absolute;
		top: 0rpx;
		right: 80rpx;
		height: 100rpx;
		width: 450rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		padding-left: 10rpx;
		border-left: 6rpx solid #007aff;
	}

	.query-section {
		position: relative;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.query-form {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.form-item {
		display: flex;
		align-items: center;
		flex-direction: row;
		margin-bottom: 20rpx;

		.label {
			width: 160rpx;
			font-size: 28rpx;
			color: #333;
			flex-shrink: 0;
		}

		.input-field {
			flex: 1;
			height: 70rpx;
			padding: 0 20rpx;
			border: 2rpx solid #e0e0e0;
			border-radius: 8rpx;
			font-size: 28rpx;

			&:focus {
				border-color: #007aff;
				background: white;
			}
		}

		.picker-view {
			flex: 1;
			height: 70rpx;
			padding: 0 20rpx;
			border: 2rpx solid #e0e0e0;
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.arrow {
				margin-left: 20rpx;
				color: #999;
				font-size: 15rpx;
			}
		}
	}

	.search-btn {
		width: 100%;
		height: 80rpx;
		background: linear-gradient(135deg, #34c759 0%, #28a745 50%, #20c997 100%);
		background-size: 200% 200%;
		color: white;
		border: none;
		border-radius: 32rpx;
		box-shadow: 0 8rpx 20rpx rgba(52, 199, 89, 0.4), 
		           inset 0 2rpx 4rpx rgba(255, 255, 255, 0.2),
		           0 0 20rpx rgba(52, 199, 89, 0.2);
		font-size: 32rpx;
		font-weight: bold;
		margin-top: 20rpx;
		letter-spacing: 1rpx;
		position: relative;
		overflow: hidden;
		transition: all 0.3s ease;
		animation: gradientShift 4s ease-in-out infinite, buttonPulse 2s ease-in-out infinite;
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.3);
		
		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: -100%;
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
			transition: left 0.5s ease;
		}
		
		&::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			width: 0;
			height: 0;
			background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
			border-radius: 50%;
			transform: translate(-50%, -50%);
			transition: all 0.3s ease;
		}
		
		&:hover {
			transform: translateY(-2rpx) scale(1.05);
			box-shadow: 0 12rpx 28rpx rgba(52, 199, 89, 0.5), 
			           inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
			           0 0 30rpx rgba(52, 199, 89, 0.3);
			
			&::before {
				left: 100%;
			}
			
			&::after {
				width: 100rpx;
				height: 100rpx;
			}
		}

		&:active {
			transform: translateY(1rpx) scale(0.98);
			box-shadow: 0 4rpx 12rpx rgba(52, 199, 89, 0.3);
		}
		
		&:disabled {
			opacity: 0.6;
			background: #ccc;
			animation: none;
			transform: none;
			box-shadow: none;
			
			&::before,
			&::after {
				display: none;
			}
		}
	}

	// 查询结果样式
	.search-results {
		margin-top: 5rpx;
		margin-bottom: 5rpx;
	}

	.result-item {
		display: flex;
		flex-direction: column;
		background: #f8f9fa;
		border-radius: 12rpx;
		padding: 24rpx;
		margin-bottom: 16rpx;
		border-left: 6rpx solid #007aff;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.result-header {
		display: flex;
		justify-content: space-between;
		padding-right: 20rpx;
		margin-bottom: 12rpx;
	}

	.teacher-id {
		font-size: 28rpx;
		font-weight: bold;
		color: #007aff;
	}

	.result-content {
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.teacher-name {
		font-size: 26rpx;
		color: #333;
		font-weight: 500;
	}

	.teacher-college {
		font-size: 24rpx;
		color: #666;
	}

	.no-results {
		text-align: center;
		padding: 40rpx 20rpx;
		color: #999;
		font-size: 28rpx;
		background: #f5f5f5;
		border-radius: 12rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	/* 按钮动画效果 */
	@keyframes gradientShift {
		0%, 100% {
			background-position: 0% 50%;
		}
		50% {
			background-position: 100% 50%;
		}
	}

	@keyframes buttonPulse {
		0%, 100% {
			transform: scale(1);
		}
		50% {
			transform: scale(1.02);
		}
	}

</style>